<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j con-box page-uc-integral">
    <div class="uc-nav">
      <div class="nav-box">
        <div
          :class="['nav-item', sts === 0 ? 'active' : '']"
          @click="changeTab(0)"
        >
          <span class="text">{{ $t('myPoints.pointBreakdown') }}</span>
          <i class="line" />
        </div>
        <div
          :class="['nav-item', sts === 1 ? 'active' : '']"
          @click="changeTab(1)"
        >
          <span class="text">{{ $t('myPoints.redeemingGoods') }}</span>
          <i class="line" />
        </div>
        <div
          :class="['nav-item', sts === 2 ? 'active' : '']"
          @click="changeTab(2)"
        >
          <span class="text">{{ $t('myPoints.commonProblems') }}</span>
          <i class="line" />
        </div>
      </div>
    </div>
    <div class="uc-serach">
      <div class="left">
        <div class="current-integral">
          {{ $t('myPoints.currentPoints') }}：
          <span class="number">{{ scoreInfo.score }}</span>
        </div>
        <div
          v-if="scoreInfo.scoreExpireSwitch"
          class="expired-integral"
        >
          {{ $t('myPoints.expiredPoints') }}：
          <span class="number">{{ scoreInfo.expireScore }}</span>
          <span class="integral-des">{{ $t('myPoints.pointsTips1') }}{{
            scoreInfo.expireYear
          }}{{ $t('myPoints.pointsTips2') }}</span>
        </div>
      </div>
      <div class="right">
        <router-link
          to="/member-center/integral-mall"
          class="search"
        >
          {{ $t('myPoints.redeem') }}
        </router-link>
      </div>
    </div>
    <!-- 积分明细 -->
    <div
      v-if="sts === 0"
      class="integral-detail"
    >
      <table
        style="border-spacing: 0"
        class="box"
      >
        <tbody>
          <tr class="box-tit">
            <th>{{ $t('myPoints.sourceUse') }}</th>
            <th style="width: 400px;">
              {{ $t('myPoints.pointsChange') }}
            </th>
            <th>{{ $t('myPoints.Time') }}</th>
          </tr>
          <tr
            v-for="(item, index) in scoreDetList"
            :key="index"
            class="box-hd"
          >
            <td>
              <div
                v-if="item.source === 0 && item.ioType === 1"
                class="text"
              >
                {{ $t('myPoints.sourceUseTips1') }}
              </div>
              <div
                v-if="item.source === 1 && item.ioType === 0"
                class="text"
              >
                {{ $t('myPoints.sourceUseTips2') }}
              </div>
              <div
                v-if="item.source === 1 && item.ioType === 1"
                class="text"
              >
                {{ $t('myPoints.sourceUseTips3') }}（{{ $t('myPoints.orderNumber') }}：{{ item.bizId }}）
              </div>
              <div
                v-if="item.source === 2"
                class="text"
              >
                {{ $t('myPoints.sourceUseTips4') }}
              </div>
              <div
                v-if="item.source === 3"
                class="text"
              >
                {{ $t('myPoints.sourceUseTips5') }}
              </div>
              <div
                v-if="item.source === 4 && item.ioType === 0"
                class="text"
              >
                {{ $t('myPoints.sourceUseTips6') }}（{{ $t('myPoints.orderNumber') }}：{{ item.bizId }}）
              </div>
              <div
                v-if="item.source === 4 && item.ioType === 1"
                class="text"
              >
                {{ $t('myPoints.sourceUseTips7') }}
              </div>
              <div
                v-if="item.source === 5 && item.ioType === 0"
                class="text"
              >
                {{ $t('myPoints.sourceUseTips8') }}
              </div>
              <div
                v-if="item.source === 6"
                class="text"
              >
                {{ $t('myPoints.sourceUseTips9') }}
              </div>
              <div
                v-if="item.source === 7"
                class="text"
              >
                {{ $t('myPoints.sourceUseTips10') }}
              </div>
              <span v-if="item.isLock">({{ $t('myPoints.pointsInLock') }})</span>
            </td>
            <td>
              <div
                v-if="item.ioType === 0"
                class="integral-change"
              >
                -{{ item.score }}
              </div>
              <div
                v-if="item.ioType === 1"
                class="integral-change add"
              >
                +{{ item.score }}
              </div>
            </td>
            <td>
              <div class="time">
                {{ item.createTime }}
              </div>
            </td>
          </tr>
          <tr v-if="scoreDetList.length === 0">
            <td colspan="3">
              {{ $t('shopInfo.noData') }}
            </td>
          </tr>
        </tbody>
      </table>
      <!-- 页码 -->
      <pagination
        v-model="scoreCurrent"
        :pages="scorePages"
        @change-page="getScoreDet"
      />
    </div>
    <!-- /积分明细 -->

    <!-- 兑换商品 -->
    <div
      v-if="sts === 1"
      class="goods-list integral-exchange"
    >
      <div class="list-con">
        <div
          v-for="item in scroeList"
          :key="item.prodId"
          class="item"
          @click="toScoreProdDet(item.prodId,item.scorePrice)"
        >
          <div class="goods-img">
            <img-show :src="item.pic" />
          </div>
          <div class="goods-msg">
            <div class="goods-name">
              {{ item.prodName }}
            </div>
            <div class="goods-price">
              <div class="icon">
                <img
                  src="@/assets/images/member-pic/integral-icon.png"
                  alt
                >
              </div>
              <div class="integral-price">
                {{ item.scorePrice }} {{ $t('myPoints.points') }}
              </div>
              <div
                v-if="item.price > 0"
                class="add"
              >
                +
              </div>
              <div
                v-if="item.price > 0"
                class="price"
              >
                ￥{{ item.price }}
              </div>
            </div>
            <!-- 销售价大于等于市场价 市场价不展示 -->
            <div
              v-if="item.oriPrice > item.price"
              class="old-price"
            >
              {{ $t('myPoints.marketPrice') }}￥{{ item.oriPrice }}
            </div>
          </div>
        </div>
      </div>
      <!-- 商品列表为空 -->
      <empty-all-tips
        v-if="isEmpty"
        :text="$t('sorryNoRelatedProducts')"
        :back="$t('lookAtOther')"
      />
      <!-- 商品列表为空 -->
      <!-- 页码 -->
      <pagination
        v-model="prodCurrent"
        :pages="prodPages"
        @change-page="getScoreProdList"
      />
      <!-- /页码 -->
    </div>
    <!-- /兑换商品 -->

    <!-- 常见问题 -->
    <div
      v-show="sts === 2"
      class="detaile-qa"
    >
      <div class="integral-qa-tit">
        {{ $t('myPoints.pointsFAQ') }}
      </div>
      <div
        v-show="scoreQuestion.paramValue"
        v-rich="scoreQuestion.paramValue"
        class="integral-qa-content"
      />
    </div>
    <!-- /常见问题 -->
  </div>
</template>

<script setup>

const route = useRoute()
const router = useRouter()

const scoreInfo = ref({}) // 积分中心信息
const sts = ref(Number(route.query.sts) || 0) // tab状态
onMounted(() => {
  // 设置网页标题
  document.title = $t('myPoints.myPoints')
  // 积分中心信息
  http.get('/p/score/scoreInfo').then(({ data }) => {
    scoreInfo.value = data
  })

  // 切换tab
  changeTab(sts.value)
})

// 积分明细
const scoreCurrent = ref(1)
const scorePages = ref(1) // 总页数
const scoreSize = ref(10)
const scoreDetList = ref([]) // 积分明细列表
// 获取积分明细
const getScoreDet = () => {
  const params = {
    current: scoreCurrent.value,
    size: scoreSize.value
  }
  http.get('/p/score/page', { params }).then(({ data }) => {
    scoreDetList.value = data.records
    scorePages.value = data.pages
    scoreCurrent.value = data.current
  })
}

const prodSize = 12
const prodCurrent = ref(1)
// 积分商品列表
const scroeList = ref([]) // 积分商品列表
const prodPages = ref(1) // 总页数
const isEmpty = ref(false)
// 获取积分商品列表
const getScoreProdList = () => {
  isEmpty.value = false
  const params = {
    current: prodCurrent.value,
    size: prodSize,
    prodType: 3,
    sort: 2
  }
  http.get('/search/page', { params }).then(({ data }) => {
    scroeList.value = data.records[0].products
    isEmpty.value = !scroeList.value.length
    prodPages.value = data.pages
  })
}

const scoreQuestion = ref({}) // 积分
// 获取积分常见问题
const getScoreQuestion = () => {
  http.get('/p/score/getScoreQuestion').then(({ data }) => {
    scoreQuestion.value = data
  })
}

// 切换tab
const changeTab = (stsPar) => {
  sts.value = stsPar // 0积分明细 1兑换商品
  if (stsPar === 0) {
    // 获取积分明细
    getScoreDet()
  } else if (stsPar === 1) {
    getScoreProdList()
  } else {
    getScoreQuestion()
  }
}

// 跳转到积分商品详情
const toScoreProdDet = (prodId, scoreFee) => {
  http.get('/search/page', {
    params: {
      current: 1,
      size: 20,
      prodType: 3,
      sort: 2
    }
  }).then(() => {
    const newPage = router.resolve({ path: '/detail', query: { prodId, scoreFee } })
    window.open(newPage.href, '_blank', 'noopener,noreferrer')
  })
}

</script>

<style lang="scss" scoped>
@use "index";
</style>

<style lang="scss" scoped>
@use "../common/scss/user-center";
</style>
